<template>
  <div class="page-container">
    <div class="info-container">
      <div class="info-container_header">
        <svg class="icon" @click="handleCancel" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4136">
          <path
            d="M499.498667 225.834667a42.666667 42.666667 0 0 1 0 60.330666L316.330667 469.333333H810.666667a42.666667 42.666667 0 1 1 0 85.333334H316.330667l183.168 183.168a42.666667 42.666667 0 1 1-60.330667 60.330666l-256-256a42.666667 42.666667 0 0 1 0-60.330666l256-256a42.666667 42.666667 0 0 1 60.330667 0z"
            p-id="4137"
          />
        </svg>
        <div class="title">用量详情</div>
      </div>
      <div class="info-container_body">
        <div class="form-section">
          <!-- <div class="form-section_title">氧气使用曲线</div> -->
          <div class="tool-container">
            <el-form class="tool-search" :model="queryParams" ref="queryFormRef" :inline="true">
              <el-form-item>
                <el-date-picker
                  v-model="times"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  format="YYYY-MM-DD hh:mm:ss"
                  value-format="YYYY-MM-DD hh:mm:ss"
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="Search" @click="getList()">搜索</el-button>
              </el-form-item>
            </el-form>
          </div>

          <div id="chart" v-loading="loading" style="height:500px" class="tabel-container myTable"></div>
        </div>
        <!-- <div class="form-section">
          <div class="form-section_title">数据列表</div>
          <div class="tabel-container myTable">
            <vxe-table ref="tableRef" :data="tableData" v-loading="loading">
              <vxe-table-column :resizable="true" type="seq" title="序号" width="80" sortable>
                <template #default="{ row }">
                  <el-checkbox :ref="row.id" size="large" v-model="row.checked" @change="select(row)" />
                </template>
              </vxe-table-column>
              <vxe-table-column :resizable="true" field="stationName" title="站房名称" sortable> </vxe-table-column>
              <vxe-table-column :resizable="true" field="startFrom" title="启动时间" sortable> </vxe-table-column>
              <vxe-table-column :resizable="true" field="endTo" title="停止时间" sortable> </vxe-table-column>
              <vxe-table-column :resizable="true" field="reportTime" title="报告时间" sortable> </vxe-table-column>
              <vxe-table-column :resizable="true" field="pkeepTime" title="保压时长(小时)" sortable>
                <template #default="{ row }">
                  {{ (row.pkeepTime/3600).toFixed(2)}}
                </template>
              </vxe-table-column>
            </vxe-table>
          </div>
        </div>-->
      </div>
      <div class="info-container_footer">
        <el-button @click="handleCancel">返回</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { shallowRef } from 'vue';
import * as echarts from 'echarts';

import { listUsage } from '@/api/station/usage/index';

import common from '@/utils/common.ts';

export default {
  props: {
    data: {}
  },
  computed: {
    times: {
      get() {
        return [this.queryParams.startFrom, this.queryParams.endTo];
      },
      set(value) {
        this.queryParams.startFrom = value[0];
        this.queryParams.endTo = value[1];
      }
    }
  },
  data() {
    return {
      myChart: null,
      loading: false,
      tableData: [],
      chartData: [],
      queryParams: {
        pageNum: 1,
        pageSize: 100000,
        stationId: '',
        status: '',
        regionCode: '',
        startFrom: '',
        endTo: ''
      },
      timeScale: [
        { label: '周', value: '1' },
        { label: '月', value: '2' },
        { label: '季', value: '3' },
        { label: '年', value: '4' }
      ],
      proxy: null
    };
  },
  mounted() {
    const { proxy } = getCurrentInstance() as ComponentInternalInstance;
    this.proxy = proxy;

    const route = useRoute();
    this.queryParams.stationId = route.query.id;

    this.myChart = shallowRef(null);
    this.init();
  },
  methods: {
    init() {
      let startFrom = new Date();
      startFrom.setDate(startFrom.getDate() - 30);
      let endTo = new Date();

      this.queryParams.startFrom = common.dateFormat(startFrom);
      this.queryParams.endTo = common.dateFormat(endTo);

      this.$nextTick(() => {
        this.getList();
        //this.initChart(chartData);
        // this.getSummary();
      });
    },

    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    initChart(datas) {
      let stationName = datas[0].stationName;
      let legend = [stationName];
      let xDatas = [];
      let yDatas = [];
      datas.forEach((data) => {
        xDatas.push(data.endTo);
        yDatas.push(data.amount);
      });
      yDatas = [
        {
          name: stationName,
          type: 'line',
          stack: 'Total',
          data: yDatas
        }
      ];
      // xDatas = xDatas.sort(function (a, b) {
      //   return a - b;
      // });

      var chartDom = document.getElementById('chart');
      if (this.myChart != null) this.myChart.dispose();
      this.myChart = echarts.init(chartDom);

      var option = {
        title: {
          text: '氧气使用曲线'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (values) {
            let str = '';
            values.forEach((v) => {
              str +=
                '<p><div style="margin-top:5px;float:left;width:20px;height:10px;background-color:' +
                v.color +
                '"></div><span style="float:left;color:' +
                v.color +
                '">' +
                v.seriesName +
                '</span> </br> 氧气使用:' +
                Math.round(v.data * 10) / 10 +
                'L</p>';
            });
            return str;
          }
        },
        legend: {
          data: legend
        },
        grid: {
          left: '50px',
          right: '100px',
          bottom: '50px',
          containLabel: true
        },

        toolbox: {
          feature: {}
        },

        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xDatas
        },

        yAxis: {
          name: '单位：L',
          type: 'value'
        },

        series: yDatas
      };

      this.myChart.setOption(option);
    },

    getList() {
      this.loading = true;
      listUsage(this.queryParams)
        .then((res) => {
          this.loading = false;
          if (res.code == 200) {
            let datas = res.rows;
            this.tableData = datas;
            this.initChart(datas);
            this.total = res.total;
          } else {
            ElMessage.error(res.msg);
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },

    //返回
    handleCancel() {
      this.proxy?.$tab.closePage();
    }
  }
};
</script>

<style lang="scss"  scoped>
.info-container_header {
  background: white;

  .icon {
    width: 30px;
    height: 30px;
    fill: blank;
  }
}
</style>